<template>
  <div class="house">
    <van-cell v-for="house in list"
              :key="house.houseCode"
              :to="`/detail/${house.houseCode}`">
      <!-- 标题插槽 -->
      <template #title>
        <van-image width="90"
                   height="70"
                   :src="`http://122.51.249.55:8080${house.houseImg}`" />
      </template>
      <div class="title van-ellipsis">{{house.title}}</div>
      <div class="desc van-ellipsis">{{house.desc}}</div>
      <van-tag :color="index%2===0?'#e1f5f8':'#e1f5ed'"
               :text-color="index%2===0?'#39becd':'#3fc28c'"
               v-for="(tag,index) in house.tags"
               :key="index">{{tag}}</van-tag>
      <div class="price"><span>{{house.price}}</span>元/月</div>
    </van-cell>
  </div>
</template>

<script>
export default {
name:'houselist',

  props: {
    list: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.house{
  .van-cell__title{
    flex: 2;
  }
  .van-cell__value{
    flex: 3;
    text-align:left;
  }
  .van-tag{
    margin: 0 5px;
  }
  .title{
    font-size: 30px;
    color: #000;
  }
  .price{
    color: red;
    span{
    font-size: 38px;
    font-weight: 700;
    margin-right: 8px;
    }
  }
}
</style>
